<!-- 提现 -->

<template>
	<view class="user-withdraw">
		<!-- Tabs -->
		<view class="withdraw-tabs">
			<u-tabs :list="tabsList" :is-scroll="true" :current="currentTab" :bold="true" height="100" font-size="30rpx"
				active-color="#333333" inactive-color="#666666" :bar-style="styleTabsBarStyle" @change="changeTab" />
		</view>
		<!-- 微信钱包 -->
		<view v-if="currentValue == 3" class="withdraw-wechat m-t-20 bg-white">
			<!-- Account -->
			<u-field label-width="160" label="微信账号" v-model="form.account" placeholder="请输入微信账号" />
			<!-- Name -->
			<u-field label-width="160" label="真实姓名" v-model="form.real_name" placeholder="请输入真实姓名" />
			<!-- Remark -->
			<u-field label-width="160" label="备注" v-model="form.remark" placeholder="(选填)" />
			<!-- 上传图片 -->
			<view class="flex-col m-t-20">
				<u-upload ref="uUpload" :header="{token: $store.getters.token}" :auto-upload="true"
					:show-progress="false" max-count="1" width="142" height="142" :custom-btn="true" :action="action"
					@on-success="onSuccess" @on-remove="onRemove" :file-list="fileList">
					<view slot="addBtn" class="flex-col col-center row-center">
						<view class="upload-image flex-col col-center row-center">
							<u-icon name="/bundle/static/icon_camera_line.png" width="54" />
						</view>

						<view class="xs m-t-10">微信收款码</view>
					</view>
				</u-upload>
			</view>
		</view>

		<!-- 支付宝 -->
		<view v-else-if="currentValue == 4" class="withdraw-alipay m-t-20 bg-white">
			<!-- Account -->
			<u-field label-width="180"  label="支付宝账号：" v-model="form.account" placeholder="请输入支付宝账号" />
			<!-- Name -->
			<u-field label-width="180"  label="真实姓名：" v-model="form.real_name" placeholder="请输入真实姓名" />
			<!-- Remark -->
			<u-field label-width="180"  label="备注：" v-model="form.remark" placeholder="(选填)" />
			<!-- 上传图片 -->
			<view class="m-t-20" style="display: flex;flex-direction: row; align-items: center;">
				<view class="label" style="width: 180rpx;">收款码：</view>
				<view class="flex">
					<u-upload ref="uUpload" :header="{token: $store.getters.token}" :auto-upload="true"
						:show-progress="false" max-count="1" width="142" height="142" :custom-btn="true" :action="action"
						@on-success="onSuccess" @on-remove="onRemove" :file-list="fileList">
						<view slot="addBtn" class="flex-col col-center row-center">
							<view class="upload-image flex-col col-center row-center">
								<u-icon name="/bundle/static/icon_camera_line.png" width="54" />
							</view>
							<view class="xs m-t-10">支付宝收款码</view>
						</view>
					</u-upload>
				</view>
			</view>
		</view>

		<!-- 银行卡 -->
		<view v-else-if="currentValue == 5" class="withdraw-alipay m-t-20 bg-white">
			<!-- Account -->
			<u-field label-width="160" label="银行卡账号" v-model="form.account" placeholder="请输入银行卡账号" />
			<!-- Name -->
			<u-field label-width="160" label="持卡人姓名" v-model="form.real_name" placeholder="请输入持卡人姓名" />
			<!-- Name -->
			<u-field label-width="160" label="提现银行" v-model="form.bank" placeholder="请输入银行名称" />
			<!-- Remark -->
			<u-field label-width="160" label="银行支行" v-model="form.subbank" placeholder="如：金湾支行" />
			<!-- Remark -->
			<u-field label-width="160" label="备注" v-model="form.remark" placeholder="(选填)" />
		</view>
		<!-- 确认提交 -->
		<view class="fixed-bottom-button">
			<view style="width: 100%;"><button class="withdraw-submit m-t-30 white br60" @tap="onSubmit" size="lg">确认</button></view>
		</view>
	</view>
</template>

<script>
	import {
		applyWithdraw,
		getWithdrawConfig,
		getlastmethod,
		getuserpay,
		setuserpay
	} from "@/api/user";
	import {
		trottle
	} from "@/utils/tools";
	import {
		baseURL
	} from '@/config/app';
	export default {
		data() {
			return {
				service_type:2,
				item_id:0,
				the_upload_money_qr_code:'',
				action: baseURL + '/api/file/formimage',
				currentTab: 0, // Tabs当前位置
				// Tabs 列表
				tabsList: [],
				// Tabs滑块样式
				styleTabsBarStyle: {
					bottom: '12rpx',
					width: '50rpx',
					height: '6rpx',
					background: 'green',
					borderRadius: '50px',
					backgroundImage: 'linear-gradient(to right, \#F79C0C, \#00632B)'
				},
				fileList: [],
				// 表单数据
				form: {
					is_default: 1, // 设为默认
					account: '', // 账户名称
					real_name: '', // 真实姓名
					money_qr_code: '', // 收款二维码
					bank: '', // 银行
					subbank: '', // 支行
					remark: '', // 备注
				},
				widthDrawConfig: {},
				lastmethod: [],
				money: '', // 提现金额
				earnestMoney:0, //提现保证金
			}
		},
		created() {
			this.getWithdrawConfigFun();
			this.earnestMoney=this.$Route.query.earnestMoney
			this.onSubmit = trottle(this.onSubmit, 1000, this)
			this.item_id = this.$Route.query.item_id;
			this.service_type = this.$Route.query.service_type;
		},
		onLoad() {
			// this.getWithdrawConfigFun();
			// this.earnestMoney=this.$Route.query.earnestMoney
			// this.onSubmit = trottle(this.onSubmit, 1000, this)
			this.item_id = this.$Route.query.item_id;
			this.service_type = this.$Route.query.service_type;
			// // console.log('==========this.$Route.query============this.$Route.query');
			// console.log(this.$Route.query);
		},
		methods: {
			getLast() {
				// getlastmethod().then(res => {
				// 	if (res.code == 1) {
				// 		this.lastmethod = res.data;
				// 		const onceMethod = this.lastmethod.find((item) => {
				// 			if (item.type == this.tabsList[this.currentTab].value) {
				// 				return item
				// 			}
				// 			return
				// 		})
				// 		this.form = onceMethod || this.form
				// 		if (this.form.money_qr_code) {
				// 			this.fileList.push({url:this.form.money_qr_code})
				// 		}
				// 	}
				// });
				
				getuserpay().then(res => {
					if (res.code == 1) {
						console.log('=========res.data========');
						console.log(res.data);
						if(res.data.account_type == this.currentValue){
							this.form = res.data;
							if(this.the_upload_money_qr_code){
								this.form.money_qr_code = this.the_upload_money_qr_code;
							}
							if (this.form.money_qr_code) {
								this.fileList.push({url:this.form.money_qr_code})
							}
						}
					}
				});
			},
			
			// 改变当前的Tabs位置
			changeTab(index) {
				this.fileList = []
				this.currentTab = index;
				const emptyForm = {
					account: '',
					real_name: '',
					money_qr_code: '',
					remark: '',
					bank: '',
					subbank: ''
				};
				const currentMethod = this.lastmethod.find((item) => {
					if (item.type == this.tabsList[this.currentTab].value) {
						return item
					}
					return
				})
				this.form = currentMethod || emptyForm
				if (this.form.money_qr_code) {
					this.fileList.push({url:this.form.money_qr_code})
				}
			},
			async getWithdrawConfigFun() {
				const {
					code,
					data
				} = await getWithdrawConfig()

				if (code == 1) {
					// this.money=this.earnestMoney||data.able_withdraw
					// console.log('this.money',this.money)
					this.widthDrawConfig = data
					this.tabsList = data.type
					this.$nextTick(() => {
						this.getLast()
					})
				}

			},
			// 提交表单
			onSubmit() {
				// this.form.money=this.money
				const data = {
					...this.form
				}
				data.account_type = this.currentValue
				data.is_default =1;
				// if (!data.money) {
				// 	this.$toast({
				// 		title: '请输入提现金额'
				// 	});
				// 	return;
				// }
				data.money_qr_code = this.the_upload_money_qr_code;
				console.log('=====onSubmit ==data==setuserpay====---------------');
				console.log(data);
				setuserpay(data).then(res => {
					// if (res.code == 1) {
					// 	this.$toast({
					// 		title: '提交成功'
					// 	});
					// 	uni.navigateBack();
					// }
					this.$toast({
						title: '提交成功'
					}, {
						tab: 2,
						url: 'bundle/pages/circulate/apply?service_type='+ this.service_type +'&item_id=' + this.item_id
					});
				});
			},
			onSuccess(e) {
				this.form.money_qr_code = e.data.base_uri
				this.the_upload_money_qr_code = e.data.base_uri
				// console.log('=====onSuccess(index) {====this.form=====');
				// console.log(this.form);
			},
			onRemove(index) {
				console.log('====onRemove====index==========');
				console.log(index);
				this.fileList.splice(index, 1)
				this.form.money_qr_code = ""
				this.the_upload_money_qr_code =''
				console.log('=====onRemove(index) {====this.form=====');
				console.log(this.form);
			},

		},
		computed: {
			currentValue(val) {
				const {
					currentTab,
					tabsList
				} = this
				return tabsList[currentTab] ? tabsList[currentTab].value : ''
			}
		}
	}
</script>


<style lang="scss" scoped>
	.fixed-bottom-button{
		width: 600rpx;
		margin-left: 50rpx;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 60rpx;
	}
	.user-withdraw {
		margin: 20rpx 30rpx;
		.withdraw-tabs {
			border-radius: 10px;
			overflow: hidden;
		}

		.withdraw-wechat,
		.withdraw-alipay {
			padding: 0 36rpx 20rpx;
			border-radius: 10px;
		}

		.upload-image {
			width: 142rpx;
			height: 142rpx;
			border: 2rpx dashed #CCCCCC;
			border-radius: 5px;
		}

		.withdraw-submit {
			background: #00632B;
		}

		::v-deep .u-field {
			padding: 26rpx 0;
		}
	}
</style>